<script setup>
import { ref } from 'vue';
const data = ref([
  {
    title: '账户密码',
    content: '当前密码强度： : 强',
    act: '修改'
  },
  {
    title: '密保手机',
    content: '当前密码强度： : c',
    act: '修改'
  },
  {
    title: '密保问题',
    content: '未设置密保问题，密保问题可有效保护账户安全',
    act: '设置'

  },
  {
    title: '备用邮箱',
    content: '已绑定邮箱： : ant***sign.com',
    act: '修改'
  },
  {
    title: 'MFA 设备',
    content: '未绑定 MFA 设备，绑定后，可以进行二次确认',
    act: '绑定'
  },
]);
</script>
<template>
  <div class="security">
    <h3>安全设置</h3>
    <div class="list">
      <a-list item-layout="horizontal" :data-source="data">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta :description="item.content">
              <template #title>
                <a href="#">{{ item.title }}</a>
              </template>
            </a-list-item-meta>
            <template #actions>
              <a-button key="list-loadmore-edit" type="link">{{ item.act }}</a-button>
            </template>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>

</template>
